<template>
	<view class="container">
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true }" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="promotion-content">
				<view class="promotion-header" style="display: flex !important; flex-direction: row !important; width: 100% !important; height: 110rpx !important; justify-content: space-between !important; align-items: stretch !important; background: #fff !important; padding: 0 24rpx !important; margin: 18rpx 0 18rpx 0 !important; border-radius: 14rpx !important; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; position: relative;">
					<view class="header-item">
						<view class="label">直接推广人数</view>
						<view class="count">{{ disNum }}</view>
					</view>
					<view class="header-item">
						<view class="label">直接推广消费金额|<text class="small-text">佣金</text></view>
						<view class="count">{{ disMoney }}元 <text class="small-text">|{{ totalCommission }}元</text></view>
					</view>
				</view>
				
				<view class="promotion-header" style="display: flex !important; flex-direction: row !important; width: 100% !important; height: 110rpx !important; justify-content: space-between !important; align-items: stretch !important; background: #fff !important; padding: 0 24rpx !important; margin: 18rpx 0 18rpx 0 !important; border-radius: 14rpx !important; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; position: relative;">
					<view class="header-item">
						<view class="label">间接推广人数</view>
						<view class="count">{{ allNum }}</view>
					</view>
					<view class="header-item">
						<view class="label">间接推广消费金额</view>
						<view class="count">{{ allMoney }}元</view>
					</view>
				</view>
				<view class="header-list-divider"></view>
				
				<view class="promotion-list" v-if="promotionList.length > 0">
					<view class="list-header">
						<text class="name">手机号</text>
						<text class="time">注册时间</text>
						<text class="amount">消费金额</text>
						<text class="amount">佣金</text>
					</view>
					<view class="list-item" v-for="(item, index) in promotionList" :key="index" @tap="viewSubPromotion(item.id, index)">
						<text class="name">{{ item.name }}</text>
						<text class="time">{{ item.register_time }}</text>
						<text class="amount">{{ item.consumption_amount }}元</text>
						<text class="amount">{{ item.commission_amount || '0.00' }}元</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				
				<view v-if="showEmpty" class="empty-container">
					<image src="/static/images/user/empty.png" mode="aspectFit"></image>
					<text>暂无推广记录</text>
				</view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				promotionList: [],
				userId: 0,
				showEmpty: false,
				disNum: 0,          // 直接推广人数默认值
				disMoney: '0.00',   // 直接推广消费金额默认值
				allNum: 0,          // 间接推广人数默认值
				allMoney: '0.00',   // 间接推广消费金额默认值
				totalCommission: '0.00'  // 佣金默认值
			}
		},
		computed: {
			...mapState(['user'])
		},
		watch: {
			user: {
				handler(newVal) {
					if (newVal && newVal.id) {
						if (!this.userId) {
							this.userId = newVal.id;
						}
						// 如果需要刷新数据
						if (this.$refs.list) {
							this.load({page: 1}, 'refresh');
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad(options) {
			// 临时恢复user
			if (!this.user || !this.user.id) {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo && userInfo.id) {
					this.$store.commit('getUserInfo', userInfo);
				}
			}
			// 只设置userId，不做其他操作
			if (options.userId) {
				this.userId = options.userId;
			}
		},
		onShow() {
			// 临时恢复user
			if (!this.user || !this.user.id) {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo && userInfo.id) {
					this.$store.commit('getUserInfo', userInfo);
				}
			}
			// 不做其他操作
		},
		methods: {
			// 加载数据
			load(event, key) {
				uni.showLoading({
					title: '加载中'
				});
				
				// 确保有用户ID
				if (!this.userId && this.user) {
					this.userId = this.user.id;
				}
				
				// 请求推广列表数据
				uni.request({
					url: '/member/user/promotionList',
					data: {
						user_id: this.userId || ''
					},
					method: 'GET',
					success: res => {
						if (res.data && res.data.data) {
							this.promotionList = res.data.data;
							this.disNum = res.data.dis_num || 0;           // 直接推广人数
							this.disMoney = res.data.dis_money || '0.00';  // 直接推广消费金额
							this.allNum = res.data.all_num || 0;           // 间接推广人数
							this.allMoney = res.data.all_money || '0.00';  // 间接推广消费金额
							this.totalCommission = res.data.total_commission || '0.00';  // 佣金
						} else {
							this.promotionList = [];
							this.disNum = 0;
							this.disMoney = '0.00';
							this.allNum = 0;
							this.allMoney = '0.00';
							this.totalCommission = '0.00';
						}
						console.log(this.promotionList);
						// 判断是否显示空状态
						// this.showEmpty = this.promotionList.length === 0;
						
						// 更新列表状态
						this.$refs.list.refreshSuccess({
							list: this.promotionList,
							total: this.promotionList.length
						});
						this.$refs.list.showPullUp = false;
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
			
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp * 1000);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			
			// 查看下级推广
			viewSubPromotion(userId, index) {

			},
			
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.promotion-content {
		padding-bottom: 30rpx;
	}
	
	.promotion-header {
		width: 100% !important;
		height: 110rpx !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: stretch !important;
		background: #fff !important;
		padding: 0 24rpx !important;
		margin: 18rpx 0 18rpx 0 !important;
		border-radius: 14rpx !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04) !important;
		overflow: hidden !important;
		position: relative;

		.header-item {
			flex: 1 !important;
			min-width: 0 !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: center !important;
			text-align: center !important;
			white-space: nowrap !important;
			position: relative !important;
			background: transparent !important;
			padding: 10rpx 0 !important;
		}
		.header-item:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 30%;
			width: 1px;
			height: 40%;
			background: #f0f0f0;
			z-index: 1;
		}
		.label {
			font-size: 24rpx !important;
			color: #999 !important;
			margin-bottom: 2rpx !important;
			font-weight: 400 !important;
			letter-spacing: 1rpx;
		}
		.count {
			font-size: 44rpx !important;
			font-weight: 700 !important;
			color: #1a1a1a !important;
			line-height: 1.1 !important;
			margin-top: 2rpx !important;
			letter-spacing: 1rpx;
			
			.small-text {
				font-size: 22rpx;
				font-weight: 400;
				color: #666;
				margin-left: 5rpx;
				vertical-align: middle;
			}
		}
	}
	
	.header-list-divider {
		width: 100%;
		height: 1px;
		background: #f0f0f0;
		margin-bottom: 8rpx;
	}
	
	.promotion-list {
		background-color: #ffffff;
		padding: 0 30rpx;
		margin: 0 20rpx;
		border-radius: 12rpx;
		
					.list-header {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			font-weight: bold;
			color: #333;
			
			.name {
				flex: 3;
				text-align: center;
			}
			
			.time {
				flex: 3;
				text-align: center;
			}
			
			.amount {
				flex: 1.5;
				text-align: center;
				padding-right: 5rpx;
			}
		}
		
		.list-item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #eee;
			
			.name {
				flex: 3;
				color: #333;
				text-align: center;
			}
			
			.time {
				flex: 3;
				color: #666;
				text-align: center;
				font-size: 24rpx;
				font-family: inherit;
			}
			
			.amount {
				flex: 1.5;
				color: #f40;
				text-align: right;
				padding-right: 5rpx;
			}
			
			.cuIcon-right {
				margin-left: 10rpx;
				color: #ccc;
			}
		}
	}
	
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		background-color: #ffffff;
		margin: 0 20rpx;
		border-radius: 12rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			color: #999;
			font-size: 28rpx;
		}
	}
</style> 